<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>class.upload.php test forms</title>
    <meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
    <style>
        #examples{
          display:flex;
          flex-direction:row;
          flex-wrap:wrap;
          align-items:stretch;
        }
        fieldset {
          box-sizing: border-box;
          margin-bottom: 20px;
          padding: 15px;
          width: 48%;
        }
        p.result {
          margin: 0px;
          padding: 0px;
        }
        legend {
          font-weight: bold;
        }
        .button {
          text-align: right;
        }
        .button input {
          font-weight: bold;
        }
        pre {
          white-space: pre-wrap;
        }

        #dnd_drag {
          display: none;
          text-align: center;
          padding: 1em 0;
          margin: 1em 0;
          color: #555;
          border: 2px dashed #888;
          border-radius: 7px;
          cursor: default;
        }
        #dnd_drag.hover {
          border: 2px dashed #000;
        }

        #xhr_progress, #dnd_progress {
          background-color: #999;
          padding: .1em 0;
          width: 0%;
        }

        #xhr_status, #dnd_status {
          font-size: 90%;
          font-style: italic;
        }
    </style>
</head>
<body>

  <h1>class.upload.php test forms</h1>

  <div id="examples">
    <fieldset>
        <legend>Simple upload</legend>
        <p>Pick up a file to upload, and press "upload" </p>
        <form name="form1" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" /></p>
            <p class="button"><input type="hidden" name="action" value="simple" />
            <input type="submit" name="Submit" value="upload" /></p>
        </form>
    </fieldset>

    <fieldset>
        <legend>Image upload</legend>
        <p>Pick up an image to upload, and press "upload" </p>
        <form name="form2" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" /></p>
            <p class="button"><input type="hidden" name="action" value="image" />
            <input type="submit" name="Submit" value="upload" /></p>
        </form>
    </fieldset>

    <fieldset>
        <legend>XMLHttpRequest upload</legend>
        <p>Pick up one file to upload, and press "upload" </p>
        <form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" id="xhr_field" /></p>
            <div id="xhr_status"></div>
            <p class="button"><input type="hidden" name="action" value="xhr" />
            <input type="submit" name="Submit" value="upload" id="xhr_upload"/></p>
            <div id="xhr_progress"></div>
        </form>
        <div id="xhr_result"></div>
    </fieldset>

    <fieldset>
        <legend>HTML5 File Drag &amp; Drop API</legend>
        <p>Drag and drop one file to upload, and press "upload" </p>
        <form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" id="dnd_field" /></p>
            <div id="dnd_drag">... drag and drop here ...</div>
            <div id="dnd_status"></div>
            <p class="button"><input type="hidden" name="action" value="xhr" />
            <input type="submit" name="Submit" value="upload" id="dnd_upload"/></p>
            <div id="dnd_progress"></div>
        </form>
        <div id="dnd_result"></div>
    </fieldset>

    <fieldset>
        <legend>Multiple upload</legend>
        <p>Pick up some files to upload, and press "upload" </p>
        <form name="form3" enctype="multipart/form-data" method="post" action="upload.php">
            <p><input type="file" name="my_field[]" value="" /></p>
            <p><input type="file" name="my_field[]" value="" /></p>
            <p><input type="file" name="my_field[]" value="" /></p>
            <p class="button"><input type="hidden" name="action" value="multiple" />
            <input type="submit" name="Submit" value="upload" /></p>
        </form>
    </fieldset>

    <fieldset>
        <legend>Multiple upload flexible</legend>
        <p>Pick up some files to upload, and press "upload" </p>
        <form name="form4" enctype="multipart/form-data" method="post" action="upload.php">
            <p><input type="file" name="my_field[]" value="" multiple="multiple"/></p>
            <p class="button"><input type="hidden" name="action" value="multiple" />
            <input type="submit" name="Submit" value="upload" /></p>
        </form>
        <p>Note: Number of processed files per request on the server is also limited by PHP ini setting <strong>max_file_uploads</strong>.</p>
    </fieldset>

    <fieldset>
        <legend>Image local manipulation</legend>
        <p>Enter a local file name (absolute or relative) for a small image, and press "process" </p>
        <form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="text" size="32" name="my_field" value="test.png" /></p>
            <p class="button"><input type="hidden" name="action" value="local" />
            <input type="submit" name="Submit" value="process" /></p>
        </form>
    </fieldset>

    <fieldset>
        <legend>Base64-encoded image data</legend>
        <p>Copy here base64-encoded file data, and press "process" </p>
        <form name="form6" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><textarea cols="32" name="my_field">base64:iVBORw0KGgoAAAANSUhEUgAAACUAAAARCAYAAABadWW4AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4AoBFik0VcV6egAAALpJREFUSMftlk0KwyAUhMfSTRDP4ybkFgGPqSRHUvAW001TWpqnFgykkIG3iT/fqGNQkSROphtOqJcppdRHGWMwTRPWdf0atPWRJLU3M/gUALFCCHzX9l2S1N7KgDRRjJHzPBMArbVdTdUYKE2UcyYADsNwiCmJUQx6KTe9tMuQVpFSonOueHy1qu2UxGgKuve+q6kaQzSlteY4jlyWpTkzv94+iXHfOc7Dc1RjnPuPfpn6R1Pqero06gEPaFNPl21bvgAAAABJRU5ErkJggg==</textarea></p>
            <p class="button"><input type="hidden" name="action" value="base64" />
            <input type="submit" name="Submit" value="process" /></p>
        </form>
    </fieldset>
  </div>
    <script type="text/javascript">

    window.onload = function () {

      function xhr_send(file, status, progress) {
        if (file) {
          xhr.addEventListener('readystatechange', function(event) {
            if(xhr.readyState == 4){
              document.getElementById(status).innerHTML = xhr.responseText;
            }
          }, false);

          xhr.upload.addEventListener("progress", function (event) {
            if (event.lengthComputable) {
              self.progress = event.loaded / event.total;
            } else if (this.explicitTotal) {
              self.progress = Math.min(1, event.loaded / self.explicitTotal);
            } else {
              self.progress = 0;
            }
            document.getElementById(progress).innerHTML = ' ' + Math.floor(self.progress*1000)/10 + '%';
            document.getElementById(progress).style.width=  self.progress*100 + '%';
          }, false);

          xhr.open("POST", "upload.php?action=xhr");
          xhr.setRequestHeader("Cache-Control", "no-cache");
          xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
          xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.name));
          xhr.send(file);
        }
      }

      function xhr_parse(file, status) {
        if (file) {
          document.getElementById(status).innerHTML = "File selected : " + file.name + "(" + file.type + ", " + file.size + ")";
        } else {
          document.getElementById(status).innerHTML = "No file selected!";
        }
      }

      function dnd_hover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
      }

      var xhr = new XMLHttpRequest();

      if (xhr && window.File && window.FileList) {

        // xhr example
        var xhr_file = null;
        document.getElementById("xhr_field").onchange = function () {
          xhr_file = this.files[0];
          xhr_parse(xhr_file, "xhr_status");
        }
        document.getElementById("xhr_upload").onclick = function (e) {
          e.preventDefault();
          xhr_send(xhr_file, "xhr_result", "xhr_progress");
        }

        // drag and drop example
        var dnd_file = null;
        document.getElementById("dnd_drag").style.display = "block";
        document.getElementById("dnd_field").style.display = "none";
        document.getElementById("dnd_drag").ondragover = function (e) {
          dnd_hover(e);
        }
        document.getElementById("dnd_drag").ondragleave = function (e) {
          dnd_hover(e);
        }
        document.getElementById("dnd_drag").ondrop = function (e) {
          dnd_hover(e);
          var files = e.target.files || e.dataTransfer.files;
          dnd_file = files[0];
          xhr_parse(dnd_file, "dnd_status");
        }
        document.getElementById("dnd_field").onchange = function (e) {
          dnd_file = this.files[0];
          xhr_parse(dnd_file, "dnd_status");
        }
        document.getElementById("dnd_upload").onclick = function (e) {
          e.preventDefault();
          xhr_send(dnd_file, "dnd_result", "dnd_progress");
        }

      }
    }
    </script>

</body>

</html>
